// Table

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin table {
  display: flex;
  flex-direction: column;
  border-collapse: collapse;
  width: 100%;
  border: $--x-border-base;
  > thead {
    position: relative;
    overflow: hidden;
    display: block;
    background-color: $--x-background;
    min-height: 42px;
    > tr {
      position: absolute;
      width: 100%;
      display: flex;
      min-height: 42px;
      > th {
        display: flex;
        align-items: center;
        flex: 1;
        position: relative;
        font-weight: 600;
        background-color: $--x-background;
        border-bottom: $--x-border-base;
        > a {
          display: inline-flex;
          align-items: center;
          color: $--x-text-300;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &.#{$--x-table}-sticky {
          position: sticky;
          z-index: 1;
        }
        .#{$--x-table}-drag-width {
          position: absolute;
          height: 100%;
          width: 0.1875rem;
          right: -0.125rem;
          cursor: ew-resize;
          transition: background-color var(--x-animation-duration-fast);
          z-index: 1;
          &:hover {
            background-color: $--x-primary;
          }
        }
      }
    }
  }
  > tbody {
    display: block;
    border-top: none;
    position: relative;
    min-height: 7rem;
    tr {
      display: flex;
      > td {
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-between;
        overflow: hidden;
        background-color: $--x-background;
        border-bottom: $--x-border-base;
        > div {
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        &.#{$--x-table}-sticky {
          position: sticky;
          z-index: 1;
        }
      }
      &.#{$--x-table}-activated {
        > td {
          background-color: $--x-background-a200;
          color: $--x-primary;
        }
      }
      &:hover {
        > td {
          background-color: $--x-background-a200;
        }
      }
      &:last-child {
        border-bottom: none;
      }
    }
    x-empty {
      position: absolute;
      top: 0;
      width: 100%;
      padding: calc(#{$--x-font-size} * 2);
    }
  }
  > tfoot {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  &-sort {
    cursor: pointer;
    transition: transform 0.2s;
    &:hover {
      color: $--x-text-300;
    }
    &:active {
      transform: translate(1px, 1px);
    }
  }
  &-sort-icon.x-icon {
    margin-left: 0.25rem;
    display: none;
    font-size: 1rem;
    transform: rotate(90deg) rotateY(180deg);
    transition: 0.3s;
    &.#{$--x-table}-icon-up,
    &.#{$--x-table}-icon-down {
      display: inherit;
    }
    &.#{$--x-table}-icon-down {
      transform: rotate(90deg);
    }
  }
  &-scroll-top {
    > thead {
      box-shadow: $--x-box-shadow-light-bottom;
      z-index: 1;
    }
  }
  &-scroll-left {
    > thead {
      .#{$--x-table}-sticky {
        box-shadow: $--x-box-shadow-light-right;
        border-right: $--x-border-base;
      }
    }
    > tbody {
      .#{$--x-table}-sticky {
        box-shadow: $--x-box-shadow-light-right;
        border-right: $--x-border-base;
      }
    }
  }
  &-td-adaption-height {
    > tbody {
      tr {
        > td {
          overflow: inherit;
          > div {
            white-space: inherit;
            text-overflow: inherit;
            overflow: inherit;
          }
        }
      }
    }
  }
  &-bordered {
    > thead > tr > th,
    > tbody tr > td {
      border-right: $--x-border-base;
      padding-left: calc(#{$--x-font-size} / 2);
      &:last-child {
        border-right: none;
      }
    }
  }
  &-cell-config {
    > thead tr,
    > tbody tr {
      display: grid;
      grid-auto-flow: row;
      height: 100%;
    }
    > thead > tr > th,
    > tbody tr > td {
      border-right: $--x-border-base;
      &:last-child {
        border-right: none;
      }
    }
  }
  &-row-size {
    @include rowSize(big, calc(#{$--x-font-size} / 5 * 4), calc(#{$--x-font-size} * 5 / 4), calc(#{$--x-font-size} / 5 * 4), 0);
    @include rowSize(large, calc(#{$--x-font-size} / 4 * 3), calc(#{$--x-font-size} * 4 / 3), calc(#{$--x-font-size} / 4 * 3), 0);
    @include rowSize(medium, calc(#{$--x-font-size} / 2), $--x-font-size, calc(#{$--x-font-size} / 2), 0);
    @include rowSize(small, calc(#{$--x-font-size} / 3), calc(#{$--x-font-size} * 2 / 3), calc(#{$--x-font-size} / 3), 0);
    @include rowSize(mini, calc(#{$--x-font-size} / 4), calc(#{$--x-font-size} / 2), calc(#{$--x-font-size} / 4), 0);
  }
}

@mixin rowSize($size, $padding-top, $padding-right, $padding-bottom, $padding-left) {
  &-#{$size} {
    > thead > tr > th,
    > tbody tr > td {
      padding: $padding-top $padding-right $padding-bottom $padding-left;
      &:first-child {
        padding-left: $padding-right;
      }
    }
    &.#{$--x-table} {
      &-bordered {
        > thead > tr > th,
        > tbody tr > td {
          padding-left: $padding-right;
        }
      }
      &-cell-config {
        > thead > tr > th,
        > tbody tr > td {
          padding-left: $padding-right;
        }
      }
    }
  }
}

@mixin pagination {
  padding-top: calc(#{$--x-font-size} / 2);
}
